<template>
  
    
    
    <!--  -->
<el-container class="home-container">
    <!-- 头部区域 -->
        <el-header>   
            <div>
                <img src="../assets/heima.png" alt="">
                 <span>电商后台管理系统</span>
            </div>
            <el-button type="info" @click="logOut">退出</el-button>
        </el-header>
     
    <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse?'64px':'200px'">  
            <div class="toggle-button" @click="toggleCollapse">|||</div>
            <!-- 菜单栏内容 -->
            <el-menu
            active-text-color="#ffd04b"
            background-color="#2f4c4d"
            text-color="#fff"
       
            unique-opened
            :collapse='isCollapse'
            :collapse-transition='false'
            router
            :default-active="$router.path+''"
            >
                <el-submenu :index="item.id.toString()" v-for="item in menuList" :key='item.id'>
                <!-- 一级菜单模板区域 -->
                    <template slot="title">
                        <!-- 图标 -->
                        <i :class="iconList[item.id]" ></i>
                        <!-- 文本 -->
                        <span>{{item.authName}}</span>
                         
                    </template>
                         <!-- 二级菜单 --> 
                            <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
                                <template slot="title">
                                <!-- 图标 -->
                                <i class="el-icon-menu"></i>
                                <!-- 文本 -->
                                <span>{{subItem.authName}}</span>
                                </template>
                            </el-menu-item>
                </el-submenu>
        
        </el-menu>
      </el-aside>
        <!-- 内容区域 -->
        <el-main>
            <router-view></router-view> 
        </el-main>
   </el-container>
</el-container>

   
</template>

<script>
export default {
  data() {
      return {
          //左侧菜单数据
          menuList:[],
          iconList:{
              '125':'iconfont icon-users',
              '103':'iconfont icon-tijikongjian',
              '101':'iconfont icon-shangpin',
              '102':'iconfont icon-danju',
              '145':'iconfont icon-baobiao',
          },
          //菜单栏是否折叠
          isCollapse:false,

      }
  },
  created(){
    this.getMenuList();
  },
  methods: {
    logOut() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMenuList(){
        const{data:res} = await this.$http.get('menus');
        if(res.meta.status!==200) return this.$message.error('res.meta.msg');
        console.log(res);
        this.menuList = res.data;
    },
    //点击按钮控制菜单折叠
    toggleCollapse(){
        this.isCollapse=!this.isCollapse;
    }
  },
}
</script>

<style lang="less" scoped>
 .home-container{
     
     height: 100%;
 }
 .el-header{
     background:#8ca8a8;
     display: flex;
     justify-content: space-between;
     padding-left: 0px;
     align-items: center;
     color: #fff;
     font-size:20px;
     >div{
        display: flex;
        align-items: center;
        span{
            margin-left: 10px;
        }
         
     }
 }
 .el-aside{
     background: #2f4c4d;
     .el-menu{
         border-right: none;
     }
     transition: width 0.5s ease;
 }
 .el-main{
     background: #cfd2d2;
 }
 .iconfont{
     margin-right: 10px;
 }
 .toggle-button{
     background: rgb(153, 189, 189);
     font-size: 15px;
     height: 25px;
     line-height: 25px;
     text-align: center;
     color: #fff;
     letter-spacing: 0.2em;
     cursor: pointer;
 }

</style>